<template>
  <div class="wrapper">
    <el-button @click="showAddDialog" class="add_but" type="primary">添加</el-button>

    <el-table :data="todayList" border>
      <el-table-column label="日期" prop="today"></el-table-column>
      <el-table-column label="起床时间" prop="wakeupTime"></el-table-column>
      <el-table-column label="睡觉时间" prop="sleepTime"></el-table-column>
      <el-table-column label="学习" prop="studyTime"></el-table-column>
      <el-table-column label="阅读" prop="readBookTime"></el-table-column>
      <el-table-column label="锻炼" prop="exercise"></el-table-column>
      <el-table-column label="心情" prop="mood"></el-table-column>
      <el-table-column label="争吵" prop="quarrel"></el-table-column>
      <el-table-column label="备注" prop="others"></el-table-column>
      <el-table-column label="备注得分" prop="othersScore"></el-table-column>
      <el-table-column label="总分" prop="totalScore"></el-table-column>
      <el-table-column label="支出" prop="expenditure"></el-table-column>
      <el-table-column label="LOVE" prop="role"></el-table-column>
    </el-table>

    <el-dialog :visible.sync="createDialogVisible" title="今日规划">
      <el-form v-model="form" label-width="100px">
        <el-form-item>
          <el-radio-group v-model="form.role">
            <el-radio label="韦唯">韦唯</el-radio>
            <el-radio label="焱焱">焱焱</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker v-model="form.today" type="date" placeholder="选择日期"> </el-date-picker>
        </el-form-item>
        <el-form-item label="起床时间">
          <el-select v-model="form.wakeupTime" placeholder="请选择">
            <el-option
              v-for="item in wakeupTimeList"
              :key="item.time"
              :label="item.time"
              :value="item.time"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="睡觉时间">
          <el-select v-model="form.sleepTime" type="datetime" placeholder="请选择">
            <el-option v-for="item in sleepTimeList" :key="item.time" :label="item.time" :value="item.time"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="学习" placeholder="请选择">
          <el-select v-model="form.studyTime">
            <el-option v-for="item in studyTimeList" :key="item.time" :label="item.time" :value="item.time"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="阅读" placeholder="请选择">
          <el-select v-model="form.readBookTime">
            <el-option
              v-for="item in readBookTimeList"
              :key="item.time"
              :label="item.time"
              :value="item.time"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运动">
          <el-rate v-model="form.exercise"> </el-rate>
        </el-form-item>
        <el-form-item label="心情">
          <el-rate v-model="form.mood"> </el-rate>
        </el-form-item>
        <el-form-item label="争吵">
          <el-rate v-model="form.quarrel"> </el-rate>
        </el-form-item>
        <el-form-item label="消费">
          <el-input-number v-model="form.expenditure" :step="0.1" :min="0" controls-position="right"></el-input-number>
          <span>元</span>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.others"></el-input>
        </el-form-item>
        <el-form-item label="备份加分">
          <el-input-number v-model="form.othersScore" :min="-5" :max="5" :step="1"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAddDialog">取 消</el-button>
        <el-button type="primary" @click="createToday">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as todayApi from '../../api/today'
import {fmtDate, fmtDate2} from '../../utils/DateUtil'

export default {
  name: 'Today',
  data() {
    return {
      todayList: [],
      createDialogVisible: false,
      form: {
        today: new Date(),
        wakeupTime: '',
        wakeupScore: 0,
        sleepTime: '',
        sleepScore: 0,
        studyTime: '',
        studyScore: 0,
        readBookTime: '',
        readBookScore: 0,
        exercise: 5,
        mood: 5,
        quarrel: 5,
        others: '',
        othersScore: 0,
        expenditure: 0,
        role: '老婆',
        totalScore: 0
      },
      wakeupTimeList: [
        {time: '06:00 之前', score: 1},
        {time: '06:00~07:00', score: 5},
        {time: '07:00~08:00', score: 4},
        {time: '08:00~09:00', score: 3},
        {time: '09:00~10:00', score: 2},
        {time: '10:00 以后', score: 1}
      ],
      sleepTimeList: [
        {time: '11:00 之前', score: 5},
        {time: '11:00~12:00', score: 4},
        {time: '12:00~1:00', score: 3},
        {time: '1:00~2:00', score: 2},
        {time: '2:00 以后', score: 1}
      ],
      studyTimeList: [
        {time: '没有学习', score: 0},
        {time: '半个小时', score: 1},
        {time: '1个小时', score: 2},
        {time: '1个半小时', score: 3},
        {time: '2个小时', score: 4},
        {time: '2个小时以上', score: 5}
      ],
      readBookTimeList: [
        {time: '没有看书', score: 0},
        {time: '半个小时', score: 1},
        {time: '1个小时', score: 2},
        {time: '1个半小时', score: 3},
        {time: '2个小时', score: 4},
        {time: '2个小时以上', score: 5}
      ]
    }
  },
  created() {
    this.getTodayList()
  },
  methods: {
    getTodayList() {
      todayApi.getToday().then(rep => {
        rep.data.forEach(item => {
          item.today = fmtDate2(item.today).split(' ')[0]
        })
        this.todayList = rep.data
      })
    },
    showAddDialog() {
      this.createDialogVisible = true
    },
    closeAddDialog() {
      this.form.today = new Date()
      this.form.wakeupTime = ''
      this.form.wakeupScore = 0
      this.form.sleepTime = ''
      this.form.sleepScore = 0
      this.form.studyTime = ''
      this.form.studyScore = 0
      this.form.readBookTime = ''
      this.form.readBookScore = 0
      this.form.exercise = 5
      this.form.mood = 5
      this.form.quarrel = 5
      this.form.others = ''
      this.form.othersScore = 0
      this.form.expenditure = 0
      this.form.role = '老婆'
      this.form.totalScore = 0
      this.createDialogVisible = false
    },
    createToday() {
      this.form.today = fmtDate(this.form.today)
      this.wakeupTimeList.forEach(item => {
        if (this.form.wakeupTime === item.time) {
          this.form.wakeupScore = item.score
        }
      })
      this.sleepTimeList.forEach(item => {
        if (this.form.sleepTime === item.time) {
          this.form.sleepScore = item.score
        }
      })
      this.studyTimeList.forEach(item => {
        if (this.form.studyTime === item.time) {
          this.form.studyScore = item.score
        }
      })
      this.readBookTimeList.forEach(item => {
        if (this.form.readBookTime === item.time) {
          this.form.readBookScore = item.score
        }
      })
      this.form.quarrel = 1 - this.form.quarrel
      this.form.totalScore =
        this.form.wakeupScore +
        this.form.sleepScore +
        this.form.studyScore +
        this.form.readBookScore +
        this.form.exercise +
        this.form.mood +
        this.form.quarrel +
        this.form.othersScore
      todayApi.createToday(this.form).then(rep => {
        this.getTodayList()
        this.closeAddDialog()
      })
    }
  }
}
</script>

<style scoped>
.wrapper {
  padding: 20px 36px;
}
.add_but {
  float: right;
  margin-bottom: 20px;
}
</style>
